<template>
	<view>
		<!-- <page-head :title="title"></page-head> -->
		<view class="uni-common-mt">
			<form @submit="saveData">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">扫描条码数：</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{barcodes}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">合格数量：</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{gmnga}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">不合格数量：</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{xmnga}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in listData" :key="index">
						<view class="uni-media-list">
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top">
									<text>{{item.matnr}} {{item.maktx}}</text>
									<text>合格数量：{{item.gmnga}}</text>
								</view>
								<view class="uni-media-list-text-bottom ">
									<text>{{item.colorName==null?'':item.colorName}} {{item.sizeName==null?'':item.sizeName}}</text>
									<text>不合格数量：{{item.xmnga}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-padding-wrap" style="margin-top: 50upx;">
					<view class="uni-flex uni-row">
						<button formType="submit" class="btn-save">确认提交</button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import lcNumberBox from '@/components/lc-number-box/lc-numberBox.vue';
	export default {
		components: {
			lcNumberBox
		},
		data() {
			return {
				productList: [],
				listData: [],
				gmnga: 0,
				xmnga: 0,
				barcodes:0
			};
		},
		onLoad(e) {
			this.productList = JSON.parse(e.data)
			this.listData = []
			this.barcodes = this.productList.length
			this.productList.forEach(item => {
				if (item.gmnga == ''){
					item.gmnga = 0
				}
				if (item.xmnga == ''){
					item.xmnga = 0
				} 
				this.gmnga = this.gmnga + parseInt(item.gmnga);
				this.xmnga = this.xmnga + parseInt(item.xmnga);
				let flag = true
				this.listData.map(e => {
					if (e.matnr == item.matnr && e.color == item.color && e.size == item.size) {
						e.gmnga = parseInt(e.gmnga) + parseInt(item.gmnga)
						e.xmnga = parseInt(e.xmnga) + parseInt(item.xmnga)
						flag = false
					}
					return e;
				})
				if (flag) {
					let e = {}
					e.matnr = item.matnr
					e.maktx = item.maktx
					e.color = item.color
					e.colorName = item.colorName
					e.size = item.size
					e.sizeName = item.sizeName
					e.gmnga = parseInt(item.gmnga)
					e.xmnga = parseInt(item.xmnga)
					this.listData.push(e)
				}
			});
		},
		methods: {
			saveData(e) {
				if (this.gmnga == 0 && this.xmnga == 0) {
					uni.showToast({
						icon: 'none',
						title: '数量输入有误'
					});
					return;
				}
				let url = '/confirmation/confirmation/addBatch'
				this.$http.post(url, this.productList, {
					emulateJSON: true
				}).then(res => {
					if (res.data.success) {
						if (res.statusCode == "200") {
							this.productList = []
							this.$tip.success('保存成功') 
							uni.setStorageSync('submitBack',true)
							uni.navigateBack({
								delta:1
							})
							// uni.reLaunch({
							// 			url: '/pages/index/index'
							//  });
							//  this.$Router.push({
							//  	name: 'baogong'
							//  })
						}
					}
				}).catch(err => {
					console.log(err);
				});
			}
		}
	}
</script>

<style>
	.uni-list-cell:after {
		left: 20upx;
	}

	.uni-list-cell {
		height: 100upx;
	}

	.uni-input {
		text-align: right;
	}

	.uni-list {
		margin-bottom: 30upx;
	}

	.title {
		padding: 10px 0;
		width: 120px
	}

	.btn-save {
		background: #3bade3;
		color: #FFFFFF;
		width: 150px;
		font-size: medium;
		/* display: inline-block; */
		/* max-width: none; */
	}

	.btn-del {
		background: #fa6b4b;
		color: #FFFFFF;
		width: 150px;
		/* display: inline-block; */
	}

	/* .btn-bottom{
		display: flex;
		padding:10upx 0;
		flex-direction: row;
	} */
	.uni-list-cell {
		padding-right: 20upx;
	}
	.uni-media-list-text-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #8f8f94;
	}
</style>
